<template>
    <div class="centermap">
        <div class="maptitle">
          <span class="title-background">
              <div class="title-text">{{ maptitle }}</div>
              <div class="title-text-mDate">{{ mDate }}</div>
          </span>
        </div>
        <div class="mapwrap">
            <div ref="myChart" id="myChart" class="gzMap"></div>
            <transition name="fade">
            <div v-if="dialogBool" class="MapDialog1">
                <div class="museum-div">
                    <span
                        class="museum-name"
                        v-for="(item, index) in mapdata"
                        :key="index"
                        @click="openLinkInNewWindow(item)"
                    >
                        {{ item.name }}
                    </span>
                </div>
            </div>
            </transition>
<!--            <transition name="fade">-->
<!--            <div v-if="dialogBool"  class="MapDialog2">-->
<!--                <div class="museum-div">-->
<!--                    <span class="museum-name">-->
<!--                        国有博物馆-->
<!--                        <span style="margin-left: 5px;color: #edbe7e">{{ mapData.guoyou }}家</span>-->
<!--                    </span>-->
<!--                    <span class="museum-name">-->
<!--                        非国有博物馆-->
<!--                        <span style="margin-left: 5px;color: #edbe7e">{{ mapData.feiguoyou}}家</span>-->
<!--                    </span>-->
<!--                    <span class="museum-name">-->
<!--                        文物收藏单位-->
<!--                        <span style="margin-left: 5px;color: #edbe7e">{{ mapData.wenwu}}家</span>-->
<!--                    </span>-->
<!--                </div>-->
<!--            </div>-->
<!--            </transition>-->
        </div>
    </div>
</template>

<script>
import jiujiang from '@/assets/json/jiujiang.json';
import yichun from '@/assets/json/yichun.json';
import nanchang from '@/assets/json/nanchang.json';
import shangrao from '@/assets/json/shangrao.json';
import jingdezhen from '@/assets/json/jingdezhen.json';
import pingxiang from '@/assets/json/pingxiang.json';
import xinyu from '@/assets/json/xinyu.json';
import fuzhou from '@/assets/json/fuzhou.json';
import yingtan from '@/assets/json/yingtan.json';
import jian from '@/assets/json/jian.json';
import zhangzhou from '@/assets/json/zhangzhou.json';
import _ from "lodash";
// import {currentGET} from "api";

export default {
    name: 'gz-map',
    props: ['mapdata', 'mapdataTop10'],
    data() {
        return {
            JsonMapName: undefined,
            JsonMapData: null,
            // mapData: null,
            dialogBool: true,
            mapName: [],
            maptitle: "全市文物收藏单位分布图(共 50家)",
            mDate: "文物系统国有博物馆 37 其他行业国有博物馆 2 非国有博物馆 4",
            mTime: '',
            charts: '',
            index: -1,
            option: null,
        };
    },

    components: {},
    watch: {
        index(val) {
            console.log(val, "indexval")
        }
    },
    computed: {},
    created() {
        console.log(this.mapdata,"this.mapdata")
        console.log(this.mapdataTop10, "this.mapdataTop10");

        this.JsonMapName = this.$route.query.name;
        console.log(this.JsonMapName, "this.JsonMapName");
        if (this.JsonMapName == "九江市") {
            this.JsonMapData = jiujiang;
        }else if (this.JsonMapName == "宜春市"){
            this.JsonMapData = yichun;
        }else if (this.JsonMapName == "南昌市"){
            this.JsonMapData = nanchang;
        }else if (this.JsonMapName == "上饶市"){
            this.JsonMapData = shangrao;
        }else if (this.JsonMapName == "景德镇市"){
            this.JsonMapData = jingdezhen;
        }else if (this.JsonMapName == "萍乡市"){
            this.JsonMapData = pingxiang;
        }else if (this.JsonMapName == "新余市"){
            this.JsonMapData = xinyu;
        }else if (this.JsonMapName == "抚州市"){
            this.JsonMapData = fuzhou;
        }else if (this.JsonMapName == "鹰潭市"){
            this.JsonMapData = yingtan;
        }else if (this.JsonMapName == "吉安市"){
            this.JsonMapData = jian;
        }else if (this.JsonMapName == "赣州市"){
            this.JsonMapData = zhangzhou;
        }
        this.$echarts.registerMap(this.JsonMapName, this.JsonMapData);
        // this.getJson();
        // this.getData();


        var mapDataList = [
            { name: '南昌市', data1: 10, data2: 4, data3: 13 },
            { name: '景德镇市', data1: 6, data2: 1, data3: 15 },
            { name: '萍乡市', data1: 5, data2: 1, data3: 1 },
            { name: '九江市', data1: 25, data2: 0, data3: 2 },
            { name: '新余市', data1: 3, data2: 0, data3: 2 },
            { name: '鹰潭市', data1: 5, data2: 0, data3: 2 },
            { name: '赣州市', data1: 21, data2: 0, data3: 4 },
            { name: '吉安市', data1: 19, data2: 0, data3: 3 },
            { name: '宜春市', data1: 11, data2: 0, data3: 1 },
            { name: '抚州市', data1: 16, data2: 0, data3: 1 },
            { name: '上饶市', data1: 16, data2: 2, data3: 5 }
        ];

        console.log(mapDataList, "mapDataList");

        let foundItem = mapDataList.find((item) => {
            console.log(item,"item")
            return item.name === this.JsonMapName;
        });

        console.log(foundItem, "foundItem");

        this.maptitle = `${this.JsonMapName}文博场馆(共 ${foundItem.data1 + foundItem.data2 + foundItem.data3}家)`;
        this.mDate = `文物系统国有博物馆 ${foundItem.data1} 其他行业国有博物馆 ${foundItem.data2} 非国有博物馆 ${foundItem.data3}`;

    },
    mounted() {
        this.$nextTick(()=>{
            this.option = {
                // graphic: [{
                //     type: 'image',
                //     id: 'logo',
                //     left: 120,
                //     top: -60,
                //     // z: 10,
                //     // bounding: 'raw',
                //     style: {
                //         image: require('../../assets/img/MapBackground.png'),
                //         width: 520,
                //         height: 690,
                //         rotation: 45, // 设置旋转角度为 45 度
                //     }
                // }],
                // geo: {
                //     map: this.JsonMapName,
                //     aspectScale: 0.75,
                //     zoom: 0.88,
                //     roam: false,
                //     itemStyle: {
                //         normal: {
                //             areaColor: "#5299d1",
                //             shadowColor: "#9acbeb",
                //             shadowOffsetX: 0,
                //             shadowOffsetY: 25,
                //         },
                //         // emphasis: {
                //         //     areaColor: "#2ab8ff",
                //         //     borderWidth: 0,
                //         //     color: "green",
                //         //     label: {
                //         //         show: false,
                //         //     },
                //         // },
                //     },
                // },
                // tooltip: { // 窗口外框
                //     backgroundColor: 'rgba(0,0,0,0)',
                //     trigger: 'item',
                // },
                // legend: { // 注释掉有文字
                // 	show: false,
                // },

                // 自定义提示框内容
                tooltip: {
                    formatter: function(params) {
                        return params.name;
                    }
                },

                geo: {
                    map: this.JsonMapName,
                    silent: true,
                    itemStyle: {
                        color: 'rgba(0, 0, 0, 0)', // 设置为透明色
                        borderColor: 'rgba(0, 0, 0, 0)' // 设置为透明色
                    }
                },
                series: [
                    {
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: this.mapdataTop10,
                        color: "#00dfff",
                        symbolSize: 12, // 控制散点的大小
                        label: {
                            show: false // 不显示标点上的标签，避免重叠
                        },
                        emphasis: {
                            itemStyle: {
                                color: '#FFF' // 鼠标悬停时的标点颜色
                            }
                        }
                    },

                    // {
                    //     name: '',
                    //     type: 'scatter',
                    //     coordinateSystem: 'geo',
                    //     color: ['#000'],
                    //     tooltip: {
                    //         position: "right",
                    //         color: "#000",
                    //         formatter(d) {
                    //             console.log(d)
                    //             return `<div style="padding: 5px 10px;">【${d.data.name}】</div>`;
                    //         },
                    //     },
                    //     data: this.mapdataTop10,
                    // },

                    {
                        //           tooltip: { // 显示的窗口
                        //               trigger: 'item',
                        //               formatter: function (item) {
                        //                   var tipHtml = '';
                        //                   tipHtml = `<div style="padding: 1.6rem 1.8rem;font-size: 1.325rem;color:#fff;border-radius:10%;background: linear-gradient(#cccecf, #cccecf) left top,
                        // 		linear-gradient(#cccecf, #cccecf) left top,
                        // 		linear-gradient(#cccecf, #cccecf) right top,
                        // 		linear-gradient(#cccecf, #cccecf) right top,
                        // 		linear-gradient(#cccecf, #cccecf) left bottom,
                        // 		linear-gradient(#cccecf, #cccecf) left bottom,
                        // 		linear-gradient(#cccecf, #cccecf) right bottom,
                        // 		linear-gradient(#cccecf, #cccecf) right bottom;
                        // background-repeat: no-repeat;
                        // background-size: .08rem .3rem, .3rem .08rem;background-color:rgba(6, 79, 111,.6);">${item.data.name} <span style="color:#f9eb59;font-size:1.4rem">5家</span> </div>`;
                        //                   return tipHtml;
                        //               },
                        //               borderWidth: 0
                        //           },
                        name: '江西省数据',
                        type: 'map',
                        map: this.JsonMapName, // 自定义扩展图表类型
                        // zoom: 0.65, // 缩放
                        showLegendSymbol: true,
                        label: { // 文字
                            show: false,
                            color: '#fff',
                            fontSize: 10
                        },
                        itemStyle: { // 地图样式
                            areaColor: '#ddfcfb',
                            borderColor: 'rgba(147, 235, 248, 1)',
                            borderWidth: 1,
                            // areaColor: {
                            //     type: 'radial',
                            //     x: 0.5,
                            //     y: 0.5,
                            //     r: 0.8,
                            //     colorStops: [{
                            //         offset: 0,
                            //         color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                            //     }, {
                            //         offset: 1,
                            //         color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                            //     }],
                            //     globalCoord: false // 缺省为 false
                            // },
                            shadowColor: 'rgba(128, 217, 248, 1)',
                            // shadowColor: 'rgba(255, 255, 255, 1)',
                            shadowOffsetX: -2,
                            shadowOffsetY: 2,
                            shadowBlur: 10
                        },
                        emphasis: { // 鼠标移入动态的时候显示的默认样式
                            itemStyle: {
                                areaColor: '#ddfcfb',
                                // borderColor: '#404a59',
                                borderWidth: 1
                            },
                            label: { // 文字
                                show: false,
                                color: '#edbe7e',
                                fontSize: 18,
                                formatter: (param) => {
                                    // var res = "{xing|} " + "\n" + param.name + "\n" + "(83家)"
                                    var res = "{xing|} " + "\n" + param.name + "\n"
                                    return res;
                                },
                                rich: {
                                    xing: {
                                        lineHeight: 40,
                                        height: 50,
                                        width: 50,
                                        align: 'center',
                                        backgroundColor: {
                                            image: require('../../assets/img/MapLocationIcons.png'),
                                        },
                                    },
                                },
                            },

                        },
                        select: {
                            itemStyle: {
                                areaColor: '#ddfcfb',
                                // borderColor: '#404a59',
                                borderWidth: 1
                            },
                            label: { // 文字
                                show: false,
                                color: '#edbe7e',
                                fontSize: 18,
                                formatter: function (param) {
                                    console.log(param, "param");
                                    // var res = "{xing|} " + "\n" + param.name + "\n" + "(83家)"
                                    var res = "{xing|} " + "\n" + param.name + "\n"
                                    return res;
                                },
                                rich: {
                                    xing: {
                                        lineHeight: 40,
                                        height: 50,
                                        width: 50,
                                        align: 'center',
                                        backgroundColor: {
                                            image: require('../../assets/img/MapLocationIcons.png'),
                                        },
                                    },
                                },
                            },
                        },
                        // rotation: 45,
                        // aspectScale: 1.15,
                        layoutCenter: ['50%', '55%'],
                        layoutSize: '90%',
                        markPoint: {
                            symbol: 'none'
                        },
                        data: '',
                    },
                    // {
                    //     type: "effectScatter",
                    //     coordinateSystem: "geo",
                    //     showEffectOn: "render",
                    //     rippleEffect: {
                    //         period: 15,
                    //         scale: 4,
                    //         brushType: "fill",
                    //     },
                    //     hoverAnimation: true,
                    //     itemStyle: {
                    //         normal: {
                    //             color: "#ffff",
                    //             shadowBlur: 10,
                    //             shadowColor: "#333",
                    //         },
                    //     },
                    // },
                ],
            };
        this.setMyEchart(); // 页面挂载完成后执行
        })
    },
    methods: {
        // getData() {
        //     currentGET("map", {}).then((res) => {
        //         if (res.success) {
        //             this.mapData = res.data;
        //             console.log(JSON.parse(JSON.stringify(this.mapData)), "this.mapData");
        //         }
        //         // else {
        //         //     this.pageflag = false;
        //         //     this.$Message({
        //         //         text: res.msg,
        //         //         type: "warning",
        //         //     });
        //         // }
        //     });
        // },
        openLinkInNewWindow(item) {
            console.log(JSON.parse(JSON.stringify(item)), "openLinkInNewWindow");

            // 修改导航当前页面类型
            this.$store.commit('museumInformation/SET_CurrentPage', 2);

            this.$router.push({
                path: '/revolutionaryMemorial',
                query: {
                    id: item.id,
                    cityId: item.cityId,
                    name: item.name,
                }
            });
        },
        setMyEchart() {
            const myChart = this.$refs.myChart; // 通过ref获取到DOM节点
            if (myChart) {
                const thisChart = this.$echarts.init(myChart); // 利用原型调取Echarts的初始化方法
                this.charts = thisChart;
                // this.mapActive();
                this.mouseEvents();
                const option = this.option; // {}内写需要图表的各种配置，可以在官方案例中修改完毕后复制过来
                thisChart.setOption(option); // 将编写好的配置项挂载到Echarts上
                window.addEventListener('resize', function () {
                    thisChart.resize(); // 页面大小变化后Echa	rts也更改大小
                });
            }
        },
        mouseEvents() {
            // this.charts.on('click', _.debounce(params => {
            //     // 获取点击事件的相关信息
            //     // console.log('params：', params);
            //     console.log('数据项名称：', params.name);
            //
            //     // 有数据名称就展示弹窗
            //     if (params.name.trim()) {
            //         this.mapName.push(params.name);
            //
            //         // this.museumName = this.mapData.cityData.find(function (item) {
            //         //     return item.cityName === params.name;
            //         // }).museum;
            //
            //         console.log(this.mapdata, "this.mapdata");
            //         this.museumName = this.mapdata.find(function (item) {
            //             return item.cityName === params.name;
            //         }).museum;
            //         console.log(this.museumName, "this.museumName");
            //
            //         this.dialogBool = true;
            //     }else {
            //         this.charts.off ("click")
            //         this.charts.clear();
            //         this.$echarts.registerMap(this.JsonMapName, this.JsonMapData);
            //         this.setMyEchart();
            //         this.mapName = [];
            //         this.dialogBool = false;
            //     }
            //
            //     // 数据名称与上一次一样就隐藏弹窗，不一样就把上一次的数据删掉
            //     if (this.mapName.length === 2) {
            //         if (this.mapName[0] === this.mapName[1]) {
            //             this.mapName = [];
            //             this.dialogBool = false;
            //         }else {
            //             this.mapName.shift();
            //         }
            //     }
            //     console.log(this.mapName, "this.mapName");
            // }, 300));
        },
    }
};

</script>
<style lang="scss" scoped>
.gzMap {
  width: 100%;
  height: 100%
}

.centermap {
  //margin-bottom: 30px;

  .maptitle {
    height: 60px;
    display: flex;
    justify-content: center;
    padding-top: 35px;
    padding-bottom: 65px;
    box-sizing: border-box;

    .title-background {
      width: 362px;
      height: 36px;
      position: relative;
      //font-weight: 900;
      //letter-spacing: 6px;
      //background: linear-gradient(
      //  92deg,
      //  #0072ff 0%,
      //  #00eaff 48.8525390625%,
      //  #01aaff 100%
      //);
      //-webkit-background-clip: text;
      //-webkit-text-fill-color: transparent;
      background-image: url("../../assets/img/MapTitleIcon.png");
      background-size: cover;

        .title-text {
            position: relative;
            top: 5px;
            left: 50px;
            font-size: 17px;
            letter-spacing: 2px;
            color: #d9fcfb;
        }

        .title-text-mDate {
            position: relative;
            top: 23px;
            left: 25px;
            font-size: 12px;
            //letter-spacing: 2px;
            color: #d9fcfb;
        }
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      //background: url("../../assets/img/xiezuo.png") no-repeat;
    }

    .you {
      //background: url("../../assets/img/xieyou.png") no-repeat;
    }
  }

  .mapwrap {
    height: 548px;
    width: 100%;
    // padding: 0 0 10px 0;
    box-sizing: border-box;
    position: relative;

    //.quanguo {
    //  position: absolute;
    //  right: 20px;
    //  top: -46px;
    //  width: 80px;
    //  height: 28px;
    //  border: 1px solid #00eded;
    //  border-radius: 10px;
    //  color: #00f7f6;
    //  text-align: center;
    //  line-height: 26px;
    //  letter-spacing: 6px;
    //  cursor: pointer;
    //  box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
    //  0 0 6px rgba(0, 237, 237, 0.4);
    //}

    //.gzMap{
    //  position:absolute;
    //}

    .MapDialog1 {
      position: absolute;
      top: 220px;
      right: 80px;
      width: 158px;
      height: 328px;
      background: url("../../assets/img/MapDialog1.png");
      background-size: cover;
      padding-top: 15px;
      box-sizing: border-box;

      .museum-div {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 300px;
        padding-top: 5px;
        padding-bottom: 27px;
        box-sizing: border-box;
        overflow: auto;

        .museum-name {
          margin-top: 8px;
          padding-bottom: 5px;
          width: 130px;
          //height: 19px;
          font-size: 12px;
          line-height: 1.5;
          color: #c8e4fa;
          text-align: center;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);

            &:hover {
                cursor: pointer;
                text-shadow: 0 0 10px #FFF;
                //background: linear-gradient(to bottom, #091c39, #3c526d);
                transform: scale(1.01);
            }

            &.selected {
                text-shadow: 0 0 10px #FFF;
                //background: linear-gradient(to bottom, #8aafd4, #13355f);
                transform: scale(1.1);
            }
        }

        .museum-name:last-child {
          border-bottom: none;
        }
      }

    }

    .MapDialog2 {
      position: absolute;
      top: 418px;
      right: 80px;
      width: 158px;
      height: 114px;
      background: url("../../assets/img/MapDialog2.png");
      background-size: cover;

      .museum-div {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 10px;
        //padding-bottom: 27px;
        box-sizing: border-box;
        overflow: auto;

        .museum-name {
          margin-top: 8px;
          padding-bottom: 5px;
          width: 130px;
          height: 19px;
          font-size: 12px;
          color: #c8e4fa;
          text-align: center;
          //border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
      }
    }
  }
}

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background: #ffffff4d;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  background: #666;
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(220, 213, 213, 0.4);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
